<script setup>
import { computed, inject, onMounted, ref, watch } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import jzmj from '../../../../assets/imgs/ic_jzmj.png'
import rzqys from '../../../../assets/imgs/ic_rzqys.png'
import fwzs from '../../../../assets/imgs/ic_fwzs.png'

import test1 from '../../../../assets/imgs/test-img1.png'
import test2 from '../../../../assets/imgs/test-img2.png'
import test3 from '../../../../assets/imgs/test-img3.png'
import {
  getDangerTotal,
  getImportantTotal,
  getParkTotalById,
} from '@/api/screen/home/index.js'
import { ElMessage } from 'element-plus'

let measure, _viewer, _layerManager

const mapId = inject('mapId')
const parkList = inject('parkList')

const props = defineProps({
  isExpanded: Boolean,
  activePark: String,
})

const parkName = computed(() => {
  const park = parkList.value.find((item) => item.id === props.activePark)
  return park ? park.name : ''
})

let imageList = ref([test1, test2, test3])

let houseList = ref([
  {
    label: '房屋总数',
    value: 267,
    img: fwzs,
    unit: '栋',
    key: 'houseTotal',
  },
  {
    label: '建筑面积',
    value: 31,
    img: jzmj,
    unit: 'km²',
    key: 'areaTotal',
  },
  {
    label: '入住企业数',
    value: 100,
    img: rzqys,
    unit: '家',
    key: 'companyTotal',
  },
])

const parkInfo = ref({
  score: 0,
  parkArea: 0,
  introduce: '',
})

const getHouseListData = () => {
  if (!props.activePark) return
  getParkTotalById({
    parkId: props.activePark,
  }).then((res) => {
    if (res.success) {
      const data = res.data || {}
      houseList.value = houseList.value.map((item) => {
        return {
          ...item,
          value: data[item.key] || 0,
        }
      })
      parkInfo.value = {
        score: data.score || 0,
        parkArea: data.parkArea || 0,
        introduce: data.introduce || '',
      }
    } else {
      ElMessage.error(res.message || '暂无数据')
    }
  })
}

const importAreaInfo = ref({
  importantcount: 0,
  totalcount: 0,
})

const getImportantAreaInfo = () => {
  if (!props.activePark) return
  getImportantTotal({
    parkId: props.activePark,
  }).then((res) => {
    if (res.success) {
      // console.log(res.data)
      importAreaInfo.value = res.data || {}
    } else {
      ElMessage.error(res.message || '暂无数据')
    }
  })
}

const dangerAreaInfo = ref({
  dangercount: 0,
  totalcount: 0,
})

const getDangerAreaInfo = () => {
  if (!props.activePark) return
  getDangerTotal({
    parkId: props.activePark,
  }).then((res) => {
    if (res.success) {
      // console.log(res.data)
      dangerAreaInfo.value = res.data || {}
    } else {
      ElMessage.error(res.message || '暂无数据')
    }
  })
}

watch(
  () => props.activePark,
  (val) => {
    if (val) {
      getHouseListData()
      getImportantAreaInfo()
      getDangerAreaInfo()
    }
  },
)

onMounted(async () => {
  getHouseListData()
  getImportantAreaInfo()
  getDangerAreaInfo()
  // const { map, layerManager } = await getHelper(mapId)
  // _viewer = map
  // measure = new Cesium.Measure(map)
  // _layerManager = layerManager
})
</script>
<template>
  <div :class="['left', isExpanded ? 'active' : '']">
    <card
      name="房屋统计"
      class="house-statistics"
      :class="{ active: activePark === 'caijia' }"
    >
      <template #title>
        <i class="title-icon"></i>
      </template>
      <div class="house-list">
        <div
          class="house-list-item"
          v-for="item in houseList"
          :key="item.label"
        >
          <img :src="item.img" />
          <div class="house-list-item-label">
            <span>{{ item.label }}</span>
          </div>
          <div class="house-list-item-value">
            <span>{{ item.value }}</span>
            <span>{{ item.unit }}</span>
          </div>
        </div>
      </div>
      <div v-if="activePark !== 'caijia'">
        <div class="area-title">
          <div class="area-title-left" style="justify-content: flex-start">
            <div class="area-title-left-names">
              <div class="area-title-left-name">危房统计</div>
            </div>
          </div>
        </div>
        <div class="statistics house">
          <div class="statistics-left">
            <div class="statistics-left-count">
              <span> {{ dangerAreaInfo.dangercount }} </span>栋
            </div>
            <div class="statistics-left-name">危房数量</div>
          </div>
          <div class="statistics-right">
            <div class="statistics-right-count">
              <span>
                {{
                  dangerAreaInfo.totalcount
                    ? (
                        (dangerAreaInfo.dangercount /
                          dangerAreaInfo.totalcount) *
                        100
                      ).toFixed(2)
                    : 0
                }} </span
              >%
            </div>
            <div class="statistics-right-name">占比</div>
          </div>
        </div>
      </div>
      <div class="area-title">
        <div class="area-title-left" style="justify-content: flex-start">
          <div class="area-title-left-names">
            <div class="area-title-left-name">重点区域统计</div>
          </div>
        </div>
      </div>
      <div class="statistics area">
        <div class="statistics-left">
          <div class="statistics-left-count">
            <span>{{ importAreaInfo.importantcount }}</span
            >栋
          </div>
          <div class="statistics-left-name">重点区域房屋数</div>
        </div>
        <div class="statistics-right">
          <div class="statistics-right-count">
            <span>
              {{
                importAreaInfo.totalcount
                  ? (
                      (importAreaInfo.importantcount /
                        importAreaInfo.totalcount) *
                      100
                    ).toFixed(2)
                  : 0
              }} </span
            >%
          </div>
          <div class="statistics-right-name">占比</div>
        </div>
      </div>
    </card>
    <card
      name="园区简介"
      class="area-info"
      :class="{ active: activePark === 'caijia' }"
    >
      <template #title>
        <i class="title-icon"></i>
      </template>
      <div class="area-info-title">
        <div class="area-info-title-info">
          <div class="area-info-title-info-left">
            <span>{{ parkName }}</span>
            <span class="value">{{ parkInfo.score }}</span>
            <span class="point">分</span>
          </div>
          <div class="area-info-title-info-right">
            <span>园区面积</span>
            <span class="value">{{ parkInfo.parkArea }}</span>
            <span class="point">km²</span>
          </div>
        </div>
      </div>
      <div class="area-info-describe">
        {{ parkInfo.introduce }}
      </div>
      <div class="area-info-image">
        <el-scrollbar ref="scrollbarRef" @scroll="scroll">
          <div class="scrollbar-flex-content" ref="innerRef">
            <div
              v-for="(item, index) in imageList"
              :key="index"
              class="scrollbar-demo-item"
            >
              <img :src="item" />
            </div>
          </div>
        </el-scrollbar>
      </div>
    </card>
  </div>
</template>
<style scoped lang="scss">
.left {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .area-title {
    display: flex;
    height: 21px;
    position: relative;

    &-left {
      height: 100%;
      width: 345px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url('@/assets/imgs/tab_yq_d.png');
      margin-left: 10px;
      display: flex;
      justify-content: space-around;
      padding-left: 25px;

      &-names {
        width: 100px;
        display: flex;
        justify-content: flex-start;
      }

      &-name {
        font-family: Source Han Sans SC;
        font-weight: bold;
        font-size: 16px;
        color: #00a6ff;
        background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        cursor: pointer;
      }

      .is-active {
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
        background: linear-gradient(259deg, #fff4c8 0%, #ffc152 98.9990234375%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .house-statistics {
    height: 508px;
    margin-bottom: var(--card-margin-bottom);
    &.active {
      height: 382px;
    }

    .title-icon {
      width: 122px;
      background-image: url('@/assets/imgs/fwtj_title.png');
    }

    .house-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      &-item {
        width: 102px;
        display: flex;
        flex-direction: column;

        img {
          height: 99px;
        }

        &-label {
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-size: 14px;
          color: #c4eaff;
          height: 30px;
          line-height: 30px;
          text-align: center;
        }

        &-value {
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-size: 14px;
          color: #c4eaff;
          height: 30px;
          line-height: 30px;
          text-align: center;

          span:first-child {
            font-family: Source Han Sans SC;
            font-weight: bold;
            font-size: 24px;
            color: #f7fbff;
            line-height: 30px;
            background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }
    }

    .statistics {
      margin-top: 20px;
      margin-bottom: 10px;
      height: 90px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: Source Han Sans SC;
      font-weight: 400;
      font-size: 13px;
      color: #c4eaff;

      &-left {
        width: 35%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &-count {
          // margin-top: 4px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-size: 12px;
          color: #c4eaff;

          span {
            font-family: Source Han Sans SC;
            font-weight: bold;
            font-size: 24px;
            color: #ff6059;
          }
        }
      }

      &-right {
        width: 35%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &-count {
          // margin-top: 4px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-size: 12px;
          color: #c4eaff;

          span {
            font-size: 24px;
          }
        }
      }
    }

    .house {
      background-image: url('@/assets/imgs/img_wftj.png');
    }

    .area {
      background-image: url('@/assets/imgs/img_zdqy.png');
    }
  }

  .area-info {
    height: 486px;
    &.active {
      height: 612px;
    }

    .title-icon {
      width: 122px;
      background-image: url('@/assets/imgs/yqtj_title.png');
    }

    &-title {
      height: 75px;
      margin-top: 10px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url('@/assets/imgs/img_yqjj_d.png');
      padding-left: 83px;
      padding-right: 21px;
      margin-bottom: 10px;

      &-info {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: Source Han Sans SC;
        color: #ffffff;
        padding-left: 10px;

        &-left {
          font-size: 14px;
          font-weight: 400;

          .value {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 18px;
            color: #36d5f0;
            margin-left: 6px;
          }

          .point {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 12px;
            color: #36d5f0;
          }
        }

        &-right {
          font-weight: 400;
          font-size: 14px;

          .value {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 18px;
            color: #ffc152;
            margin-left: 6px;
          }

          .point {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 12px;
            color: #ffc152;
          }
        }
      }
    }

    &-describe {
      padding: 0px 20px;
      height: 170px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      font-size: 14px;
      text-indent: 24px;
      color: #ffffff;
      line-height: 24px;
      margin-bottom: 10px;
    }

    &-image {
      // margin-top: 18px;
      display: flex;
      align-items: center;

      .scrollbar-flex-content {
        display: flex;
        flex: 1;
      }

      .scrollbar-demo-item {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 128px;
        height: 100px;
        margin: 5px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;

        img {
          height: 100%;
          width: 100%;
        }
      }
    }
  }
}
</style>
